<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订票列表</title>
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 250px">
                        <label class="layui-form-label">订单号</label>
                        <div class="layui-input-block">
                            <input type="text" id="name" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-admin" data-type="search_table">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="layui-card-body">
                <div style="padding-bottom: 10px;">
                    <button class="layui-btn layuiadmin-btn-admin" data-type="batchdel">删除</button>
                    <!--<button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>-->
                </div>

                <table id="table" lay-filter="table"></table>


            </div>
        </div>
    </div>

    <script th:src="@{/layuiadmin/layui/layui.js}"></script>

    <script type="text/html" id="table_admin">
    <!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="fa fa-pencil"></i>编辑</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="fa fa-trash-o"></i>删除</a>
    </script>

    <script>

        layui.use(['jquery','layer', 'table'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var $ = layui.jquery;
            //执行一个 table 实例
            table.render({
                elem: '#table',
                height: 450,
                url: '/manager/orderList', //数据接口
                title: '订票列表',
                page: true,
                limit: 5,
                limits: [5,10,15,20],
                cols: [
                    [ //表头
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: '订票ID', width:50},
                    {field: 'username', title: '用户名',templet: '<div>{{d.customer.username}}</div>'},
                    {field: 'flightNo', title: '航班号',templet: '<div>{{d.flight.flightNo}}</div>'},
                    {field: 'startPlace', title: '起始地',templet: '<div>{{d.flight.startPlace}}</div>'},
                    {field: 'endPlace', title: '到达地',templet: '<div>{{d.flight.endPlace}}</div>'},
                    {field: 'startDate', title: '起飞时间', templet:function(d){return '<div>'+getDate(d.flight.startDate)+'</div>'}},
                    {field: 'endDate', title: '到达时间', templet:function(d){return '<div>'+getDate(d.flight.endDate)+'</div>'}},
                    {field: 'realName', title: '乘机人',templet: '<div>{{d.customer.realName}}</div>'},
                    {field: 'phone', title: '乘机人电话',templet: '<div>{{d.customer.phone}}</div>'},
                    {field: 'idNumber', title: '身份证',templet: '<div>{{d.customer.idNumber}}</div>'},
                    {field: 'price', title: '价格', width:100},
                    {field: 'state', title: '状态', templet:function(d){return '<div>'+getState(d.state)+'</div>'}},
                    {fixed: 'right',title:'操作', width: 140, align:'center', toolbar: '#table_admin'}
                    ]
                ],
                //用于搜索结果重载
                id: 'sreload'
            });

            var active = {
                search_table: function(){
                    var name = $('#name');
                    //执行重载
                    table.reload('sreload', {
                        //一定要加不然乱码
                        method: 'post'
                        ,page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            //表示传到后台的参数
                            name: name.val()
                        }
                    });
                },
                add: function() {
                    layer.open({
                        type: 2,
                        title: '添加',
                        skin: 'layui-layer-demo', //加上边框
                        area: ['500px', '550px'], //宽高
                        content: '/manager/addOrder'
                    });
                },
                batchdel:function () {
                    var checkAll = table.checkStatus('sreload');
                    if(checkAll.data.length == 0){
                        layer.msg('请选择数据进行删除');
                    }else{
                        layer.confirm('真的删除行么', function(){
                            var jsonObj = {};
                            for(var i=0;i<checkAll.data.length;i++){
                                jsonObj["ids["+i+"]"] = checkAll.data[i].id;
                            }
                            $.ajax({
                                url:'/manager/delOrder',
                                data:jsonObj,
                                dataType:'json',
                                type:'post',
                                success:function (data) {
                                    if (data.success){
                                        window.location.reload();
                                    }else{
                                        layer.msg(data.message);
                                    }
                                }
                            })
                        });
                    }

                }
            };

            $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            table.on('tool(table)', function(obj){ //注：tool 是工具条事件名，table 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'edit'){
                    edit(data);
                } else if(layEvent === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        del(data,obj,index);
                    });
                }
            });

            function edit(data) {
                layer.open({
                    type: 2,
                    title: '修改',
                    skin: 'layui-layer-demo', //加上边框
                    area: ['500px', '550px'], //宽高
                    method: 'post',
                    content: '/manager/addOrder?type=edit&id='+data.id
                });
            }
            //后边两个参数仅仅是因为要执行动态删除dom
            function del(data,obj,index){
                var jsonObj = {};
                jsonObj["ids[0]"] = data.id;
                $.ajax({
                    url:'/manager/delOrder',
                    data:jsonObj,
                    dataType:'json',
                    type:'post',
                    success:function (data) {
                        if (data.success){
                            obj.del(); //删除对应行（tr）的DOM结构
                            layer.close(index);
                        }else{
                            layer.msg(data.message);
                        }
                    }
                })
            }

        });


        function getDate(val){
            if(val!=""&&val!=null){
                var date = new Date(val);
                var year = date.getFullYear().toString();
                var month = (date.getMonth() + 1);
                var day = date.getDate().toString();
                var hour = date.getHours().toString();
                var minutes = date.getMinutes().toString();
                var seconds = date.getSeconds().toString();
                if (month < 10) {
                    month = "0" + month;
                }
                if (day < 10) {
                    day = "0" + day;
                }
                if (hour < 10) {
                    hour = "0" + hour;
                }
                if (minutes < 10) {
                    minutes = "0" + minutes;
                }
                if (seconds < 10) {
                    seconds = "0" + seconds;
                }
                return "<span>"+year + "-" + month + "-" + day + " " + hour + ":" + minutes +"</span>";
            }else {
                return "";
            }
        }

        function getState(state) {
            if(state==0){
                return "等待付款";
            }else if(state==1){
                return "已付款(等待确认)";
            }else if(state==2){
                return "已失效";
            }
        }

    </script>
</body>
</html>